<template>
	<view class="driver">
		<view class="bj">
			<view class="input">
				<view class="label">姓名</view>
				<input v-model="form.real_name" type="text" placeholder="请输入真实姓名" placeholder-style="color: #AEAEAE">
			</view>
			<view class="input">
				<view class="label">身份证号</view>
				<input v-model="form.id_no" type="text" placeholder="请输入身份证号" placeholder-style="color: #AEAEAE">
			</view>
			<view class="label">
				身份证照片
			</view>
			<view class="content">
				<DriverImage :url="form.front_card_img" @change="form.front_card_img = $event" bgImage="static/wx_app/image/id_1.png" />
				<DriverImage :url="form.opposite_card_img" @change="form.opposite_card_img = $event" bgImage="static/wx_app/image/id_2.png" />
			</view>
			<view class="label" style="margin-bottom: 20rpx;">
				车辆照片
			</view>
			<view class="input">
				<view class="label">车牌号</view>
				<input v-model="form.car_plate" type="text" placeholder="请输入车牌号" placeholder-style="color: #AEAEAE">
			</view>
			<view class="content">
				<DriverImage :url="form.car_img" @change="form.car_img = $event" bgImage="static/wx_app/image/car.png" />
			</view>
			<view class="label">
				驾驶证照片
			</view>
			<view class="content">
				<DriverImage :url="form.first_driving_img" @change="form.first_driving_img = $event" bgImage="static/wx_app/image/jia1.png" />
				<DriverImage :url="form.second_driving_img" @change="form.second_driving_img = $event" bgImage="static/wx_app/image/jia2.png" />
			</view>
			<view class="label">
				行驶证照片
			</view>
			<view class="content">
				<DriverImage :url="form.first_steer_img" @change="form.first_steer_img = $event" bgImage="static/wx_app/image/xing1.png" />
				<DriverImage :url="form.second_steer_img" @change="form.second_steer_img = $event" bgImage="static/wx_app/image/xing2.png" />
			</view>
		</view>
		<up-button @click="handleSumbit" type="primary" text="立即申请"></up-button>
	</view>
</template>

<script setup>
	import DriverImage from './components/driver_image.vue'
	import { ref } from 'vue'
	import user from '@/api/user.js'
	import utils from '@/utils/util.js'
	const url = ref('')
	const form = ref({
		real_name: '',
		id_no: '',
		front_card_img: '',
		opposite_card_img: '',
		car_plate: '',
		car_img: '',
		first_driving_img: '',
		second_driving_img: '',
		first_steer_img: '',
		second_steer_img: '',
	})
	const handleSumbit = async () => {
		const { status, info, data } = await user.applyDriver(form.value)
		utils.toast(info)
		if(status == 1) {
			uni.navigateBack()
		}
	}
</script>

<style lang="scss" scoped>
	.driver {
		padding: 26rpx;
		.bj {
			background: #FFFFFF;
			box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(128,128,128,0.06);
			border-radius: 32rpx;
			margin-bottom: 52rpx;
			padding: 32rpx 34rpx;
			.input {
				display: flex;
				align-items: center;
				height: 98rpx;
				padding: 0 26rpx;
				border: 2rpx solid #E1E1E1;
				border-radius: 20rpx;
				margin-bottom: 20rpx;
				input {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					line-height: 39rpx;
					width: calc(100% - 140rpx);
				}
				.label {
					width: 120rpx;
					margin-right: 20rpx;
				}
			}
			.label {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
				line-height: 39rpx;
			}
			.content {
				display: flex;
				justify-content: space-between;
				margin: 32rpx 0;
				::v-deep .image {
					width: calc((100vw - 170rpx) /2);
					height: calc((100vw - 170rpx) /2 / 1.5);
				}
			}
		}
	}
</style>